<template>
  <div>
    <el-dialog
      title="分配用户"
      :visible.sync="distributionUserDialog"
      width="940px"
      class="dialogTitle distributionUserDialog"
      @closed="distributionUserDialogClose"
    >
      <div class="distributionUserBtn_content">
        <div>
          <cs-btn
            type="primary"
            btnText="添加用户"
            class="addUserBtn"
            @click.native="switchDistributionUserPanel"
          />
          <cs-btn btnText="批量取消授权" class="cancelUserBtn" />
        </div>
        <div>
          <el-input
            placeholder="请输入登录名称"
            suffix-icon="el-icon-search"
            class="role_login_input"
            v-model="distributionUser_loginName"
          >
          </el-input>
        </div>
      </div>
      <div class="distribution-table_box">
        <el-table
          ref="distributionUserTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          class="distribution-table"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="登录名称"> </el-table-column>
          <el-table-column prop="num" label="用户名称"> </el-table-column>
          <el-table-column prop="color" label="邮箱"> </el-table-column>
          <el-table-column prop="phoneNum" label="手机号码"> </el-table-column>
          <el-table-column prop="phoneNum" label="用户状态"> </el-table-column>
          <el-table-column prop="phoneNum" label="创建时间"> </el-table-column>
          <el-table-column prop="phoneNum" label="操作">
            <el-link type="primary">取消授权</el-link>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination_right distribution_pagination_box">
        <cs-pagination />
      </div>
      <div class="dialog-footer">
        <cs-btn
          type="primary"
          @click.native="distributionUserDialog = false"
          btnText="确定"
          class="confirm_btn dialog_btn"
        />
        <cs-btn @click.native="distributionUserDialog = false" btnText="取消" class="dialog_btn" />
      </div>
    </el-dialog>

    <!-- 分配用户-添加用户对话框 -->
    <el-dialog
      :visible.sync="distributionAddUserDialog"
      width="940px"
      class="dialogTitle distributionUserDialog"
      @closed="distributionAddUserDialogClose"
    >
      <label slot="title" class="distributionAddUserDialog_title"
        ><span>分配用户-</span>添加用户</label
      >
      <div class="distributionUserBtn_content">
        <div>
          <el-input
            placeholder="请输入登录名称"
            suffix-icon="el-icon-search"
            class="addrole_login_input"
            v-model="distributionAddUser_loginName"
          >
          </el-input>
        </div>
      </div>
      <div class="distribution-table_box">
        <el-table
          ref="distributionAddUserTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          class="distribution-table"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="登录名称"> </el-table-column>
          <el-table-column prop="num" label="用户名称"> </el-table-column>
          <el-table-column prop="color" label="邮箱"> </el-table-column>
          <el-table-column prop="phoneNum" label="手机号码"> </el-table-column>
          <el-table-column prop="phoneNum" label="用户状态"> </el-table-column>
          <el-table-column prop="phoneNum" label="创建时间"> </el-table-column>
        </el-table>
      </div>
      <div class="pagination_right distribution_pagination_box">
        <cs-pagination />
      </div>
      <div class="dialog-footer">
        <cs-btn
          type="primary"
          @click.native="switchDistributionUserPanel"
          btnText="确定"
          class="confirm_btn dialog_btn"
        />
        <cs-btn @click.native="switchDistributionUserPanel" btnText="取消" class="dialog_btn" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import csBtn from '@/components/cs-btn/cs-btn.vue'
import csPagination from '@/components/cs-pagination/cs-pagination.vue'

export default {
  components: {
    csBtn,
    csPagination
  },
  data() {
    return {
      distributionUserDialog: false,
      distributionAddUserDialog: false,
      distributionUser_loginName: '',
      distributionAddUser_loginName: '',
      // 备份数据，用于重置输入框重新赋值
      distributionUser_loginName_backup: '',
      distributionAddUser_loginName_backup: '',
      tableData: [
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        },
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        },
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        },
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        },
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        },
        {
          name: '张小凡',
          num: '苏E1H345',
          color: '蓝色',
          phoneNum: 18977912345,
          type: '执法suv车',
          validityTime: '2025-07-10 10:00:00',
          zs: 2,
          site: '周铁S230'
        }
      ]
    }
  },
  created() {
    this.$bus.$on('distributionUserDialogVisible', () => {
      this.distributionUserDialog = true
    })
  },
  methods: {
    // 切换对话框
    switchDistributionUserPanel() {
      this.distributionAddUserDialog = !this.distributionAddUserDialog
      this.distributionUserDialog = !this.distributionUserDialog
    },
    // 分配用户对话框关闭事件
    distributionUserDialogClose() {
      // 重置输入框
      this.distributionUser_loginName = this.distributionUser_loginName_backup
      // 清空表格选中状态
      this.$refs.distributionUserTable.clearSelection()
    },
    // 分配用户-添加用户对话框关闭事件
    distributionAddUserDialogClose() {
      // 重置输入框
      this.distributionAddUser_loginName = this.distributionAddUser_loginName_backup
      // 清空表格选中状态
      this.$refs.distributionAddUserTable.clearSelection()
    }
  }
}
</script>

<style scoped>
.el-select >>> .el-input__inner {
  border-radius: 0;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.el-textarea >>> .el-textarea__inner {
  border-radius: 0;
}

.distributionUserDialog >>> .el-dialog__header {
  padding: 26px 30px 19px 30px;
}

.distributionUserDialog >>> .el-dialog__title {
  color: #006eff;
}

.distributionUserDialog >>> .el-dialog__body {
  padding: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 32px !important;
}

.distribution-table_box {
  margin-top: 26px;
  margin-bottom: 16px;
  border-top: 1px solid #dddddd;
}

.distribution-table >>> .el-checkbox__inner {
  width: 14px;
  height: 14px;
}

.distribution-table >>> .el-checkbox__inner::after {
  top: 0px;
  left: 3px;
  border: 3px solid #fff;
  border-left: 0;
  border-top: 0;
}

.distribution-table >>> .el-checkbox__inner::before {
  top: 4px;
  height: 5px;
}

.distribution_pagination_box {
  justify-content: right;
  margin: 16px 30px 36px 0;
}

.distributionUserBtn_content {
  display: flex;
  justify-content: space-between;
  padding: 0 30px 0 32px;
}

.addUserBtn {
  width: 100px;
}

.cancelUserBtn {
  width: 128px;
}

.role_login_input >>> .el-input__inner {
  width: 292px;
  height: 32px;
  line-height: 32px;
}

.role_login_input >>> .el-input__icon {
  line-height: 32px;
}

.addrole_login_input >>> .el-input__inner {
  width: 880px;
  height: 32px;
  line-height: 32px;
}

.addrole_login_input >>> .el-input__icon {
  line-height: 32px;
}

.distributionAddUserDialog_title span {
  color: #006eff;
}
</style>
